<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, onMounted, ref } from 'vue'
import { getInAndOutTemperatureData } from '@/api/environmentalDataController.ts'
import { useEnvironmentDataStore } from '@/stores/useEnvironmentDataStore.ts'

const dataTimestampList = ref<string[]>()
const indoorTemperatureList = ref<number[]>()
const outdoorTemperatureList = ref<number[]>()
const environmentDataStore = useEnvironmentDataStore()

const fetchTemperatureData = async () => {
  const res = await getInAndOutTemperatureData()
  dataTimestampList.value = res.data.data?.dataTimestampList
  environmentDataStore.setDataTimestamp(dataTimestampList.value ?? [])
  indoorTemperatureList.value = res.data.data?.indoorTemperatureList
  environmentDataStore.setIndoorTemperature(indoorTemperatureList.value ?? [])
  outdoorTemperatureList.value = res.data.data?.outdoorTemperatureList
  environmentDataStore.setOutdoorTemperature(outdoorTemperatureList.value ?? [])
}

onMounted(() => {
  fetchTemperatureData()
})

const options = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // 修改x轴为一天中每隔2小时的时间点（0:00至22:00）
      data: dataTimestampList.value,
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C',
      },
    },
    series: [
      {
        name: '室内',
        type: 'line',
        // 对应12个时间点的室内温度数据（可根据实际情况调整数值）
        data: indoorTemperatureList.value,
        markPoint: {
          data: [
            { type: 'max', name: '室内最高温' },
            { type: 'min', name: '室内最低温' },
          ],
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }],
        },
      },
      {
        name: '室外',
        type: 'line',
        // 对应12个时间点的室外温度数据（可根据实际情况调整数值）
        data: outdoorTemperatureList.value,
        markPoint: {
          data: [
            { type: 'max', name: '室外最高温' },
            { type: 'min', name: '室外最低温' },
          ],
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }],
        },
      },
    ],
  }
})
</script>

<template>
  <div class="data-temperature-analyze">
    <a-card title="室内外温度分析">
      <v-chart :option="options" style="height: 60vh; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
